<template>
  <div class="box_yj" ref="parent" style="position:relative">
    <span></span>
    <div class="sq-title">为民服务</div>
    <div ref="charts" :style="chartsDom"></div>
  </div>
</template>
<script>
import {
  get_JobTable_JobSupplyTop10,
  get_JobTable_TalentGapTop10,
  get_JobTable_ProportionIndustry
} from "@/api/data";
export default {
  data() {
    return {
      chartsDom: {},
      data2: [],
      data3: null,
      data4: [],
      jz: true,
      jz2: true,
      jz3: true
    };
  },
  props: ["height", "dateProp"],
  computed: {
    setStyle: {
      get() {
        return 0;
      },
      set(val) {
        this.chartsDom = {
          width: val - 60 + "px",
          height: this.height - 30  + "px",
          "z-index": 100,
          position: "relative",
          // 'background-color': 'red',
          overflow: "hidden",
          left: "-6px"
        };
      }
    }
    // data3ValueTotal() {
    //   return eval(this.data3.map(v=>v.value).join('+'))
    // }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_ => {
      this.init();
    });
  },
  methods: {
    init() {
      //     this.jz3=false
      //   get_JobTable_JobSupplyTop10(this.dateProp)
      //   .then(({data:{data}})=>{
      //     this.jz3=true
      //     this.data1 = data.length>0? data:[];
      // 	console.log('get_JobTable_JobSupplyTop10get_JobTable_JobSupplyTop10get_JobTable_JobSupplyTop10get_JobTable_JobSupplyTop10')
      // 	console.log(this.data1)
      //   })
      this.drawChart();
    },
    drawChart() {
      console.log(this.listData);
      let option = {
        color: ["#00bfc2", "#BF3EFF"],
        tooltip: {},
        
     
        legend: {
          left: "center",
          textStyle: {
            color: ["#f00", "#0f0"]
          },
          data: ["光明小区", "和平小区"],
          left:'left',
          orient:'vertical',
          left:'5%',
          top:'5%'
        },
        radar: {
          shape: 'circle',
          radius: '60%' ,
          center:['60%','50%'],
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5]
            }
          },
           axisLine: {
            lineStyle: {
                color: 'rgba(131,141,158,.9)',
                },
        },
          indicator: [
            { name: "服务代办", max: 6500 },
            { name: "社区绿化", max: 16000 },
            { name: "重点人员走访", max: 30000 },
            { name: "矛盾调解", max: 38000 },
            { name: "民意收集", max: 52000 }
          ],
          splitArea : {
            show : false,
            areaStyle : {
                color: 'rgba(255,0,0,0)', // 图表背景的颜色
            },
        },
         splitLine : {
            show : true,
            lineStyle : {
                width : 1,
                color : 'rgba(131,141,158,.9)', // 设置网格的颜色
            },
        },
        },
        series: [
          {
            name: "预算 vs 开销（Budget vs spending）",
            type: "radar",
            // areaStyle: {normal: {}},
        symbol: 'rect', // 拐点的样式，还可以取值'rect','angle'等
            data: [
              {
                value: [4300, 10000, 28000, 35000, 50000],
                name: "和平小区",
                itemStyle: {
                    normal: {
                        color: 'rgba(255,225,0,.8)',
                        lineStyle: {
                            color: 'rgba(255,225,0,.8)',
                        },
                    },
                },
              },
              {
                value: [5000, 14000, 28000, 31000, 42000],
                name: "光明小区"
              }
            ]
          }
        ]
      };
      let chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
    }
  }
};
</script>
<style lang="stylus" scoped>
.section {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}
</style>